<!-- Copyright (c) 2019-2020 十三 all rights reserved. -->
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head th:replace="header::head-fragment('易购商城-商品详情','detail')">
</head>
<link rel="stylesheet" th:href="@{css/shop.css}">
<body>
<header th:replace="header::header-fragment"></header>

<div id="detail">
    <!-- nav -->
    <nav th:replace="header::nav-fragment"></nav>

    <div class="dc">
        <div class="content w">
            <div class="title fl">商品详情</div>
            <div class="clear"></div>
        </div>
    </div>

    <div class="intro mt20 w clearfix">
        <div class="left fl" style="position: relative;">
            <div class="swiper-container fl">
                <img th:src="@{${detail.skuInfo.skuDefaultImg}}">
            </div>
        </div>
        <div class="right fr">
            <div class="h3 ml20 mt20" th:text="${detail.skuInfo.skuTitle}">商品主标题</div>
            <div class="sub_title mr40 ml20 mt10" th:text="${detail.skuInfo.skuSubtitle}">商品副标题</div>
            <div class="item_price mr40 ml20 mt10" th:if="${detail.seckillSkuInfoTo == null}">
                <th:block th:text="${#numbers.formatDecimal(detail.skuInfo.price, 1, 2)} +' 元'"></th:block>
            </div>
            <div class="item_price mr40 ml20 mt10"
                 th:if="${detail.seckillSkuInfoTo != null}">
                <div th:if="${#dates.createNow().getTime() >= detail.seckillSkuInfoTo.startTime &&
                              #dates.createNow().getTime() <= detail.seckillSkuInfoTo.endTime}">
                    <th:block
                            th:text="'秒杀价 ' + ${#numbers.formatDecimal(detail.seckillSkuInfoTo.seckillPrice, 1, 2)} +' 元'"></th:block>
                </div>
                <div th:if="${#dates.createNow().getTime() < detail.seckillSkuInfoTo.startTime}">
                    <!--秒杀开始时间-->
                    商品将在 [[${#dates.format(new java.util.Date(detail.seckillSkuInfoTo.startTime), 'yyyy-MM-dd HH:mm:ss')}]]进行秒杀
                </div>
                <del>
                    <th:block th:text="${#numbers.formatDecimal(detail.skuInfo.price, 1, 2)} +' 元'"></th:block>
                </del>
            </div>
            <div class="tb-extra ml20 clear" th:each="attr : ${detail.saleAttrs}">
                <dl>
                    <dt>选择[[${attr.attrName}]]</dt>
                    <dd th:each="value : ${attr.attrValues}">
                        <a style="cursor:pointer" th:attr="skuIds = ${value.skuIds},
                           class = ${#lists.contains(value.skuIds, detail.skuInfo.skuId)} ? 'sku_attr_value checked' : 'sku_attr_value'"
                        >[[${value.attrValue}]]</a>
                    </dd>
                </dl>
            </div>
            <div class="tb-extra ml20" id="J_tbExtra">
                <dl>
                    <dt>承诺</dt>
                    <dd><a class="J_Cont" title="满足7天无理由退换货申请的前提下，包邮商品需要买家承担退货邮费，非包邮商品需要买家承担发货和退货邮费。"
                           target="_blank"><img th:src="@{image/7d.jpg}">7天无理由</a></dd>
                </dl>
                <dl>
                    <dt>支付</dt>
                    <dd><a href="##" target="_blank"><img th:src="@{image/hua.png}">蚂蚁花呗</a><a href="##"
                                                                                               target="_blank"><img
                            th:src="@{image/card.png}">信用卡支付</a><a href="##" target="_blank"><img
                            th:src="@{image/ji.png}">集分宝</a></dd>
                </dl>
                <dl>
                    <dt>支持</dt>
                    <dd>折旧变现，买新更省钱。<a style="float:none;text-decoration: underline;" href="##">详情</a></dd>
                </dl>

            </div>
            <div class="order"
                 th:if="${detail.seckillSkuInfoTo != null &&
                         (#dates.createNow().getTime() >= detail.seckillSkuInfoTo.startTime &&
                          #dates.createNow().getTime() <= detail.seckillSkuInfoTo.endTime)}">
                <!--<input class="car" type="button" th:onclick="'saveAndGoCart('+${detail.skuInfo.skuId}+')'"-->
                <!--       value="立即选购"/>-->
                <input class="car" type="button" id="seckill"
                       th:attr="skuId=${detail.skuInfo.skuId},
                       sessionId=${detail.seckillSkuInfoTo.promotionSessionId},
                       code=${detail.seckillSkuInfoTo.randomCode}"
                       value="立即抢购"/>
            </div>
            <div class="order"
                 th:if="${detail.seckillSkuInfoTo == null ||
                         (#dates.createNow().getTime() < detail.seckillSkuInfoTo.startTime ||
                          #dates.createNow().getTime() > detail.seckillSkuInfoTo.endTime)}">
                <!--<input class="car" type="button" th:onclick="'saveAndGoCart('+${detail.skuInfo.skuId}+')'"-->
                <!--       value="立即选购"/>-->
                <input class="car" type="button" th:onclick="'addToCart('+${detail.skuInfo.skuId}+')'" value="加入购物车"/>
            </div>
        </div>
    </div>
    <!-- 这里使用的是 th:utext 标签，用 th:text 不会解析 html，用 th:utext 会解析 html -->
    <div class="goods mt20 w clearfix">
        <div class="Shop">
            <div class="ShopXiangqing">
                <div class="allquanbushop">
                    <ul class="shopjieshao">
                        <li class="jieshoa" style="background: #e4393c;">
                            <a style="color: white; cursor: pointer">商品介绍</a>
                        </li>
                        <li class="baozhuang" style="cursor:pointer">
                            <a>规格与包装</a>
                        </li>
                        <li>
                            <a>售后保障</a>
                        </li>
                        <li>
                            <a>商品评价(4万+)</a>
                        </li>
                        <li>
                            <a>预约说明</a>
                        </li>

                    </ul>
                    <!--商品详情-->
                    <div class="huawei">
                        <ul class="xuanxiangka">
                            <li class="jieshoa actives" id="li1">
                                <div class="shanpinsssss">
                                    <img class="xiaoguo" th:src="${decription}"
                                         th:each="decription : ${#strings.listSplit(detail.description.description, ',')}"/>
                                </div>
                            </li>
                            <li class="baozhuang actives" id="li2">
                                <div class="guiGebox">
                                    <div class="guiGe" th:each="group:${detail.attrGroups}">
                                        <h3 th:text="${group.groupName}">分组名</h3>
                                        <dl>
                                            <div th:each="attr:${group.attrs}">
                                                <dt th:text="${attr.attrName}">属性名</dt>
                                                <dd th:text="${attr.attrValue}">属性值</dd>
                                            </div>
                                        </dl>
                                    </div>
                                </div>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div th:replace="footer::footer-fragment"></div>

<!-- jQuery -->
<script th:src="@{jquery/jquery.min.js}"></script>
<script th:src="@{sweetalert/sweetalert.min.js}"></script>
<script th:src="@{js/search.js}" type="text/javascript"></script>
<script type="text/javascript">

    // 属性选择
    $(".sku_attr_value").click(function () {
        // 1、点击的元素先添加自定义属性。为了识别我们刚才被点击的
        $(this).addClass("clicked");
        let skus = [];
        let cur = $(this).attr("skuIds");
        skus.push(cur);
        // 去掉同一行所有checked
        $(this).parent().parent().find(".sku_attr_value").removeClass("checked");

        $("a[class='.sku_attr_value checked']").each(function () {
            skus.push($(this).attr("skuIds"));
        })
        // 遍历获取交集部分
        let skuId = skus[0];
        for (let i = 1; i < skus.length; i++) {
            skuId = $(skuId).filter(skus[i]);
        }
        location.href = "http://egomall.shop:8006/skuId=" + skuId[1] + ".html";

    });
    $(function () {
        $(".sku_attr_value").css({"border": "solid 1px #CCC"});
        $("a[class = 'sku_attr_value checked']").css({"border": "solid 1px #1baeae"});
    })

    // 商品介绍点击事件
    $('.shopjieshao li').each(function (i) {
        $(this).click(function () {
            $('.shopjieshao li a').css('color', '#666666');
            $(this).css('background', ' #e4393c').siblings().css('background', '#f7f7f7');
            $(this).find('a').css('color', 'white');
            $('.xuanxiangka .actives').eq(i).css('display', 'block').siblings().css('display', 'none');
        })
    });
    $('.shopjieshaos li').each(function (i) {
        $(this).click(function () {
            $('.shopjieshaos li a').css('color', '#666666');
            $(this).css('background', ' #e4393c').siblings().css('background', '#f7f7f7');
            $(this).find('a').css('color', 'white');
            $('.xuanxiangka .actives').eq(i).css('display', 'block').siblings().css('display', 'none');
        })
    });

    // 添加到购物车
    function addToCart(id) {
        $.ajax({
            type: 'POST',
            url: '/cart/add-to-cart',
            data: {
                skuId: id,
                count: 1
            },
            dataType: 'json',
            success: function (result) {
                if (result.code === 200) {
                    swal({
                        title: "添加成功",
                        text: "确认框",
                        icon: "success",
                        buttons: true,
                        dangerMode: true,
                    }).then(() => {
                            window.location.reload();
                        }
                    );
                } else {
                    swal(result.msg, {
                        icon: "error",
                    });
                }
            },
            error: function () {
                swal("操作失败", {
                    icon: "error",
                });
            }
        });
    }

    $("#seckill").click(function () {
        let logged = [[${session.loggedUser != null}]];
        if (logged) {
            let killId = $(this).attr("sessionId") + "_" + $(this).attr("skuId");
            let code = $(this).attr("code");
            let num = 1;
            let param = {
                "killId": killId,
                "code": code,
                "num": num
            };
            $.ajax({
                type: 'POST',
                url: '/coupon/kill',
                contentType: 'application/json',
                data: JSON.stringify(param),
                success: function (result) {
                    if (result.code === 200) {
                        swal({
                            title: "抢购成功，商品已加入你的购物车！",
                            icon: "success",
                            buttons: true,
                            dangerMode: true,
                        }).then(() => {
                                window.location.reload();
                            }
                        );
                    } else {
                        swal("很遗憾，手速慢了，已经被抢光了。。。", {
                            icon: "error",
                        });
                    }
                },
                error: function () {
                    swal("抢购失败", {
                        icon: "error",
                    });
                }
            });
        } else {
            swal("请先登录", {
                icon: "error",
            });
        }
    })
</script>
</body>
</html>
